<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: xiaodi 53527718@qq.com
 * @LastEditTime: 2025-11-11 22:05:10
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜品转台通知单</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .more-bill-card .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
        text-align: center;
        color: #000000;
      }

      .more-bill-card .description {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000000;
        margin: 4px 0;
      }

      .more-bill-card .desc-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000000;
        margin-top: 4px;
      }

      .more-bill-card .desc-item .desc-item-right {
        display: flex;
        align-items: center;
      }

      .more-bill-card .desc-item .desc-item-right p {
        margin: 0px;
        margin-left: 20px;
      }

      .more-bill-card .desc-line {
        width: 100%;
        height: 1px;
        background: #000;
        margin-top: 6px;
        border-top: 1px solid #000;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .more-bill-card .good-list-box {
        margin-top: 4px;
      }

      .more-bill-card .good-list-box .good-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000000;
      }

      .more-bill-card .good-list-box .good-item .good-right-box {
        display: flex;
        align-items: center;
      }

      .more-bill-card .good-list-box .good-item .good-right-box p {
        margin: 0px;
        margin-left: 20px;
      }

      /* .more-bill-card .good-list-box .good-item .good-name {
            max-width: 60px;
        } */

      .more-bill-card .good-list-box .good-sku-item {
        margin-top: 4px;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000000;
        line-height: 18px;
      }
      .good-sku-item-box {
        margin-top: 4px;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card">
        <h1 class="title" v-if="postMessageDatas.detail&&postMessageDatas.detail.shopName">
          {{ postMessageDatas.detail.shopName }}
        </h1>
        <div class="description">【菜品转台通知单】</div>
        <div class="desc-item" v-if="postMessageDatas.detail">
          桌台：{{postMessageDatas.detail.deskName}}
        </div>
        <!-- <div class="desc-item" v-if="postMessageDatas&&postMessageDatas.ticket_id">单号：{{ postMessageDatas.ticket_id
                }}</div> -->
        <div class="desc-item">
          <div v-if="postMessageDatas.detail&&postMessageDatas.detail.clerkName">
            {{ postMessageDatas.detail.clerkName }}
          </div>
          <span v-if="postMessageDatas&&postMessageDatas.create_time"
            >{{ postMessageDatas.create_time }}</span
          >
        </div>
        <div class="desc-item">
          <div>菜品</div>
          <div class="desc-item-right">
            <span>单价</span>
            <p>数量</p>
          </div>
        </div>
        <div class="desc-line"></div>
        <template
          v-if="postMessageDatas.detail&&postMessageDatas.detail.foodList &&postMessageDatas.detail.foodList.length"
        >
          <div
            class="good-list-box"
            v-for="(food,index) in postMessageDatas.detail.foodList"
            :key="index"
          >
            <div class="good-item">
              <div class="good-name">{{ food.name }}</div>
              <div class="good-right-box">
                <span>￥{{ food.money }}</span>
                <p>{{ food.num }}{{food.unit}}</p>
              </div>
            </div>

            <div class="good-sku-item-box" v-if="food.group_info && food.group_info.length">
              <div class="good-item" v-for="(sku,index) in food.group_info" :key="index">
                <div class="good-name">{{ sku.name }}</div>
                <div class="good-right-box">
                  <span>&nbsp;</span>
                  <p>{{ sku.num }}{{sku.unit}}</p>
                </div>
              </div>
            </div>
            <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
              （{{ dealFoodSkuDescFun(food) }}）
            </div>
          </div>
        </template>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          postMessageDatas: {
            detail: {
              foodList: [
                {
                  name: '红烧肉',
                  money: 25,
                  num: 2,
                  unit: '份',
                  total_money: 50,
                  group_info: [
                    {
                      id: '2j6pja8t2bf',
                      category: { name: '西贝凉菜', id: '35' },
                      name: '水果拼盘',
                      notes: [],
                      num: 1,
                      sku_id: '295',
                      status: 1,
                      unit: '份'
                    }
                  ]
                }
              ]
            }
          }
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess, printerPage) => {
            this.postMessageDatas = mess
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        computed: {
          // 处理多个桌台回显
          // computedDeskName() {
          //     let deskNameList = []
          //     if (this.postMessageDatas?.detail?.deskList?.length) {
          //         deskNameList = this.postMessageDatas.detail.deskList.map(desk => {
          //             return `${desk.name}(${desk.use_num}人)`
          //         })
          //         return deskNameList.join('、')
          //     }
          //     return ''
          // },
          // 处理回显菜品的规格信息（做法+口味+部位）
          dealFoodSkuDescFun() {
            return function (item) {
              if (item && item.notes && item.notes.length) {
                return item.notes.join('、')
              } else {
                return false
              }
            }
          }
        }
      })
    </script>
  </body>
</html>
